<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="计划编号" prop="planCode">
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入计划编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="计划名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入计划名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="queryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="queryParams.goodsName"
            placeholder="请输入商品名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="提货单位" prop="pickCompany">
          <el-select
            v-model="queryParams.pickCompany"
            placeholder="请选择提货单位"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="status in statusArr"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发货时间" prop="deliveryTime">
          <div style="width: 280px" class="flex align-center">
            <div class="flex1">
              <el-date-picker
                v-model="queryParams.dateStart"
                size="small"
                value-format="yyyy-MM-dd"
                type="date"
                range-separator="-"
              ></el-date-picker>
            </div>
            <span class="m-0-5">-</span>
            <div class="flex1">
              <el-date-picker
                v-model="queryParams.dateEnd"
                size="small"
                value-format="yyyy-MM-dd"
                type="date"
                range-separator="-"
              ></el-date-picker>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="status in statusArr"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <div class="flex-shrink-0 opt-btn">
      <el-button
        type="primary"
        size="small"
        :disabled="multipleSelection.length != 1"
        @click="confirmReceipt"
      >
        确认签收
      </el-button>
      <el-button
        :disabled="multipleSelection.length != 1"
        type="primary"
        size="small"
        @click="receiptSign"
      >
        签收记录
      </el-button>
      <el-button
        :disabled="
          multipleSelection.length != 1 || multipleSelection[0].status == '01'
        "
        type="primary"
        size="small"
        @click="priceSetting"
      >
        价格设置
      </el-button>
    </div>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>

        <el-table-column
          align="center"
          label="发货单号"
          prop="deliveryCode"
        ></el-table-column>

        <el-table-column
          align="center"
          label="计划编号"
          prop="planCode"
        ></el-table-column>

        <el-table-column
          align="center"
          label="计划名称"
          prop="planName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="项目名称"
          prop="projectName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="提货单位"
          prop="pickCompany"
        ></el-table-column>

        <el-table-column
          align="center"
          label="承运单位"
          prop="transportCompany"
        ></el-table-column>

        <el-table-column
          align="center"
          label="收货地址"
          prop="address"
        ></el-table-column>

        <el-table-column
          align="center"
          label="发货时间"
          prop="deliveryTime"
        ></el-table-column>

        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span> {{ scope.row.status | dictFilter(statusArr) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="toDelivery(scope.row)"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="发货记录"
      width="85%"
      custom-class="max-w-1200"
      destroy-on-close
      :closeOnClickModal="false"
      @close="closeDialog"
      :visible.sync="showDeliveryForm"
    >
      <delivery-form
        :orderData="orderData"
        from="delivery-record"
        @close="showDeliveryForm = false"
        v-if="orderData"
      >
      </delivery-form>
    </el-dialog>
    <el-dialog
      title="签收记录"
      width="85%"
      custom-class="max-w-1200"
      destroy-on-close
      :closeOnClickModal="false"
      @close="closeDialog"
      :visible.sync="showReceiptSign"
    >
      <receipt-sign
        @toDetail="toDetail"
        :orderData="orderData"
        v-if="orderData"
      >
      </receipt-sign>
    </el-dialog>
    <el-dialog
      :title="signData ? '签收记录详情' : '确认签收'"
      width="85%"
      custom-class="max-w-1200"
      destroy-on-close
      :closeOnClickModal="false"
      @close="closeDialog"
      :visible.sync="showSignForm"
    >
      <sign-form
        @close="showSignForm = false"
        :signData="signData"
        :orderData="orderData"
        key="1"
        v-if="orderData && signData"
      >
      </sign-form>
      <sign-form
        @close="showSignForm = false"
        :signData="signData"
        :orderData="orderData"
        key="2"
        v-if="orderData && !signData"
      >
      </sign-form>
    </el-dialog>

    <el-dialog
      title="价格设置"
      width="85%"
      custom-class="max-w-1200"
      destroy-on-close
      :closeOnClickModal="false"
      @close="closeDialog"
      :visible.sync="showPriceSetting"
    >
      <price-setting
        @close="showPriceSetting = false"
        :orderData="orderData"
        v-if="orderData"
      >
      </price-setting>
    </el-dialog>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
import deliveryForm from "@/views/components/delivery-form/delivery-form.vue";
import receiptSign from "./components/receipt-sign.vue";
import signForm from "./components/sign-form.vue";
import priceSetting from "./components/price-setting.vue";
export default {
  mixins: [tableMixin],
  filters: { dictFilter },
  components: {
    "delivery-form": deliveryForm,
    "receipt-sign": receiptSign,
    "sign-form": signForm,
    "price-setting": priceSetting,
  },
  data() {
    return {
      total: 0,
      tableData: [
        {
          deliveryCode: "fh212322", // 发货单号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          projectName: "深圳湾一号", // 项目名称
          pickCompany: "深圳er飞冲天有限公司", // 提货单位
          transportCompany: "捷讯达物流公司", // 承运单位
          address: "深圳市南山区XXXX工业园区", // 收货地址
          deliveryTime: "2022-04-15 12:00:00", // 发货时间
          status: "01", // 状态
        },
        {
          deliveryCode: "fh212323", // 发货单号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          projectName: "深圳湾一号", // 项目名称
          pickCompany: "深圳二飞冲天有限公司", // 提货单位
          transportCompany: "捷讯达物流公司", // 承运单位
          address: "深圳市南山区XXXX工业园区", // 收货地址
          deliveryTime: "2022-04-15 12:00:00", // 发货时间
          status: "02", // 状态
          tableData: [
            {
              serialNumber: "1", // 序号
              deliveryCode: "fh212322", // 发货单号
              signTime: "2022-04-16", // 签收时间
              signPerson: "王五", // 签收人
              signFiles: [
                "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
              ], // 签收附件
            },
          ],
        },
        {
          deliveryCode: "fh212324", // 发货单号
          planCode: "cgjh00001", // 计划编号
          planName: "XXXX采购计划表", // 计划名称
          projectName: "深圳湾一号", // 项目名称
          pickCompany: "深圳三飞冲天有限公司", // 提货单位
          transportCompany: "捷讯达物流公司", // 承运单位
          address: "深圳市南山区XXXX工业园区", // 收货地址
          deliveryTime: "2022-04-15 12:00:00", // 发货时间
          status: "03", // 状态
          tableData: [
            {
              serialNumber: "1", // 序号
              deliveryCode: "fh212322", // 发货单号
              signTime: "2022-04-16", // 签收时间
              signPerson: "王五", // 签收人
              signFiles: [
                "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
              ], // 签收附件
            },
          ],
        },
      ],
      loading: false,
      statusArr: [
        {
          dictValue: "01",
          dictLabel: "待签收",
        },
        {
          dictValue: "02",
          dictLabel: "部分签收",
        },
        {
          dictValue: "03",
          dictLabel: "已签收",
        },
      ],
      queryParams: {
        planCode: "",
        planName: "",
        projectName: "",
        goodsName: "",
        pickCompany: "",
        dateStart: "",
        dateEnd: "",
        status: "",
      },
      orderData: null,
      signData: null,
      showDeliveryForm: false,
      showReceiptSign: false,
      showSignForm: false,
      showPriceSetting: false,
      multipleSelection: [],
    };
  },
  created() {},
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    confirmReceipt() {
      this.orderData = this.multipleSelection[0];
      this.showSignForm = true;
    },
    receiptSign() {
      this.orderData = this.multipleSelection[0];
      this.showReceiptSign = true;
    },
    toDetail(signData) {
      console.log("signData", signData);
      this.signData = signData;
      this.showSignForm = true;
    },
    priceSetting() {
      this.orderData = this.multipleSelection[0];
      this.showPriceSetting = true;
    },
    closeDialog() {
      if (this.signData) {
        this.signData = null;
        return;
      }
      this.orderData = null;
      this.signData = null;
    },
    toDelivery(orderData) {
      this.orderData = orderData;
      this.showDeliveryForm = true;
    },
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
